<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医院综合管理仪表板 - 支付管理</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="integrated-dashboard.css">
    <link rel="stylesheet" href="payment-management.css">
    <script src="integrated-dashboard.js" defer></script>
    <style>
        .menu-item {
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .menu-item:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="profile">
                <div class="profile-image">
                    <img src="./images/man.png" alt="Profile Picture">
                </div>
                <div class="profile-info">
                    <p>张医生<br>管理员</p>
                </div>
                <div class="collapse-button">
                    <img src="images/right-arrows.png" alt="Collapse">
                </div>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="dashboard-icon">
                    <div class="dashboard-box"></div>
                    <div class="dashboard-box"></div>
                    <div class="dashboard-box"></div>
                    <div class="dashboard-circle"></div>
                </div>
                <span class="menu-text">仪表板</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/appointment.png" alt="Appointment">
                </div>
                <span class="menu-text">预约管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/doctor.png" alt="Doctor">
                </div>
                <span class="menu-text">医生管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='patient-add.html'">
                <div class="icon-container">
                    <img src="images/patient.png" alt="Patients">
                </div>
                <span class="menu-text">患者管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/setting-lines.png" alt="Settings">
                </div>
                <span class="menu-text">系统设置</span>
            </div>
            
            <div class="menu-item active" onclick="window.location.href='payment.html'">
                <div class="icon-container">
                    <img src="images/security-payment.png" alt="Payments">
                </div>
                <span class="menu-text">支付管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/team.png" alt="Team">
                </div>
                <span class="menu-text">团队管理</span>
            </div>
            
            <div class="menu-item logout" onclick="window.location.href='index.html'">
                <div class="icon-container">
                    <img src="images/power.png" alt="Logout">
                </div>
                <span class="menu-text">退出登录</span>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="main-content">
            <div class="header">
                <div class="profile-section">
                    <img src="images/file.png" alt="File Icon" class="file-icon">
                    <h1>支付管理</h1>
                </div>
            </div>
            
            <div class="content-section">
                <!-- Payment Table Section -->
                <div class="payment-table-section">
                    <div class="payment-header">
                        <h2>所有支付</h2>
                    </div>
                    
                    <!-- 搜索和过滤区域 -->
                    <div class="search-filter-section">
                        <div class="search-box">
                            <input type="text" class="search-input" placeholder="搜索支付记录..." id="searchInput">
                            <button class="search-btn" onclick="searchPayments()">搜索</button>
                        </div>
                        
                        <div class="filter-buttons">
                            <button class="filter-btn active" onclick="filterPayments('all')">全部</button>
                            <button class="filter-btn" onclick="filterPayments('paid')">已支付</button>
                            <button class="filter-btn" onclick="filterPayments('pending')">待支付</button>
                            <button class="filter-btn" onclick="filterPayments('today')">今日</button>
                        </div>
                    </div>
                    
                    <!-- 支付表格 -->
                    <table class="payment-table" id="paymentTable">
                        <thead>
                            <tr>
                                <th width="3%">
                                    <div class="status-indicator"></div>
                                </th>
                                <th width="12%">日期</th>
                                <th width="15%">医生</th>
                                <th width="20%">治疗项目</th>
                                <th width="12%">费用</th>
                                <th width="8%">税费</th>
                                <th width="10%">折扣</th>
                                <th width="12%">总计</th>
                                <th width="8%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="paymentTableBody">
                            <tr data-status="paid" data-date="2022-01-12">
                                <td>
                                    <div class="status-indicator paid" title="已支付"></div>
                                </td>
                                <td class="date-cell" data-label="日期">2022年1月12日</td>
                                <td class="doctor-name" data-label="医生">李医生</td>
                                <td class="treatment-name" data-label="治疗项目" title="常规检查">常规检查</td>
                                <td class="amount" data-label="费用">¥145</td>
                                <td data-label="税费">5%</td>
                                <td data-label="折扣">8%</td>
                                <td class="amount large" data-label="总计">¥156</td>
                                <td class="payment-actions" data-label="操作">
                                    <button class="action-btn" onclick="editPayment(this)" title="编辑">
                                        <img src="images/edit-button.png" alt="Edit">
                                    </button>
                                    <button class="action-btn" onclick="deletePayment(this)" title="删除">
                                        <img src="images/trash.png" alt="Delete">
                                    </button>
                                </td>
                            </tr>
                            
                            <tr data-status="pending" data-date="2022-01-15">
                                <td>
                                    <div class="status-indicator pending" title="待支付"></div>
                                </td>
                                <td class="date-cell" data-label="日期">2022年1月15日</td>
                                <td class="doctor-name" data-label="医生">王医生</td>
                                <td class="treatment-name" data-label="治疗项目" title="X光检查">X光检查</td>
                                <td class="amount" data-label="费用">¥250</td>
                                <td data-label="税费">5%</td>
                                <td data-label="折扣">0%</td>
                                <td class="amount large" data-label="总计">¥262</td>
                                <td class="payment-actions" data-label="操作">
                                    <button class="action-btn" onclick="editPayment(this)" title="编辑">
                                        <img src="images/edit-button.png" alt="Edit">
                                    </button>
                                    <button class="action-btn" onclick="deletePayment(this)" title="删除">
                                        <img src="images/trash.png" alt="Delete">
                                    </button>
                                </td>
                            </tr>
                            
                            <tr data-status="paid" data-date="2022-01-18">
                                <td>
                                    <div class="status-indicator paid" title="已支付"></div>
                                </td>
                                <td class="date-cell" data-label="日期">2022年1月18日</td>
                                <td class="doctor-name" data-label="医生">张医生</td>
                                <td class="treatment-name" data-label="治疗项目" title="血液检查">血液检查</td>
                                <td class="amount" data-label="费用">¥180</td>
                                <td data-label="税费">5%</td>
                                <td data-label="折扣">10%</td>
                                <td class="amount large" data-label="总计">¥189</td>
                                <td class="payment-actions" data-label="操作">
                                    <button class="action-btn" onclick="editPayment(this)" title="编辑">
                                        <img src="images/edit-button.png" alt="Edit">
                                    </button>
                                    <button class="action-btn" onclick="deletePayment(this)" title="删除">
                                        <img src="images/trash.png" alt="Delete">
                                    </button>
                                </td>
                            </tr>
                            
                            <tr data-status="paid" data-date="2022-01-20">
                                <td>
                                    <div class="status-indicator paid" title="已支付"></div>
                                </td>
                                <td class="date-cell" data-label="日期">2022年1月20日</td>
                                <td class="doctor-name" data-label="医生">刘医生</td>
                                <td class="treatment-name" data-label="治疗项目" title="心电图">心电图</td>
                                <td class="amount" data-label="费用">¥320</td>
                                <td data-label="税费">5%</td>
                                <td data-label="折扣">5%</td>
                                <td class="amount large" data-label="总计">¥336</td>
                                <td class="payment-actions" data-label="操作">
                                    <button class="action-btn" onclick="editPayment(this)" title="编辑">
                                        <img src="images/edit-button.png" alt="Edit">
                                    </button>
                                    <button class="action-btn" onclick="deletePayment(this)" title="删除">
                                        <img src="images/trash.png" alt="Delete">
                                    </button>
                                </td>
                            </tr>
                            
                            <tr data-status="pending" data-date="2022-01-22">
                                <td>
                                    <div class="status-indicator pending" title="待支付"></div>
                                </td>
                                <td class="date-cell" data-label="日期">2022年1月22日</td>
                                <td class="doctor-name" data-label="医生">陈医生</td>
                                <td class="treatment-name" data-label="治疗项目" title="超声检查">超声检查</td>
                                <td class="amount" data-label="费用">¥200</td>
                                <td data-label="税费">5%</td>
                                <td data-label="折扣">0%</td>
                                <td class="amount large" data-label="总计">¥210</td>
                                <td class="payment-actions" data-label="操作">
                                    <button class="action-btn" onclick="editPayment(this)" title="编辑">
                                        <img src="images/edit-button.png" alt="Edit">
                                    </button>
                                    <button class="action-btn" onclick="deletePayment(this)" title="删除">
                                        <img src="images/trash.png" alt="Delete">
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <!-- 分页信息 -->
                    <div class="pagination-info">
                        <p id="paginationText">5 条结果：显示第 1 页，共 1 页</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 搜索功能
        function searchPayments() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const rows = document.querySelectorAll('#paymentTableBody tr');
            let visibleCount = 0;
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });
            
            updatePagination(visibleCount);
        }

        // 过滤功能
        function filterPayments(filter) {
            // 更新按钮状态
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            const rows = document.querySelectorAll('#paymentTableBody tr');
            let visibleCount = 0;
            const today = new Date().toISOString().split('T')[0];
            
            rows.forEach(row => {
                let show = false;
                
                switch(filter) {
                    case 'all':
                        show = true;
                        break;
                    case 'paid':
                        show = row.dataset.status === 'paid';
                        break;
                    case 'pending':
                        show = row.dataset.status === 'pending';
                        break;
                    case 'today':
                        const rowDate = row.dataset.date;
                        show = rowDate === today;
                        break;
                }
                
                if (show) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });
            
            updatePagination(visibleCount);
        }

        // 编辑支付记录
        function editPayment(button) {
            const row = button.closest('tr');
            const doctor = row.querySelector('.doctor-name').textContent;
            const treatment = row.querySelector('.treatment-name').textContent;
            const amount = row.querySelector('.amount').textContent;
            
            alert(`编辑支付记录:\n医生: ${doctor}\n治疗项目: ${treatment}\n金额: ${amount}`);
        }

        // 删除支付记录
        function deletePayment(button) {
            const row = button.closest('tr');
            const doctor = row.querySelector('.doctor-name').textContent;
            const treatment = row.querySelector('.treatment-name').textContent;
            
            if (confirm(`确定要删除${doctor}的${treatment}支付记录吗？`)) {
                row.remove();
                updatePagination();
            }
        }

        // 更新分页信息
        function updatePagination(count = null) {
            if (count === null) {
                count = document.querySelectorAll('#paymentTableBody tr[style=""], #paymentTableBody tr:not([style])').length;
            }
            document.getElementById('paginationText').textContent = `${count} 条结果：显示第 1 页，共 1 页`;
        }

        // 实时搜索
        document.getElementById('searchInput').addEventListener('input', function() {
            if (this.value.length === 0) {
                // 如果搜索框为空，恢复当前过滤器状态
                const activeFilter = document.querySelector('.filter-btn.active');
                if (activeFilter) {
                    activeFilter.click();
                }
            } else {
                searchPayments();
            }
        });

        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'f') {
                e.preventDefault();
                document.getElementById('searchInput').focus();
            }
        });

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updatePagination();
        });
    </script>
</body>
</html> 